<template>
  <view class="container">
    <z-paging ref="paging" v-model="list" @query="getlist">
      <template #top>
        <view class="search-wrapper">
          <u-search
            shape="round"
            v-model="keyword"
            @custom="getlist"
            @clear="getlist"
            placeholder="请输入关键字"
            :clearabled="true"
            bgColor="#ffffff"
          ></u-search>
        </view>
      </template>
      <view class="template-list">
        <view 
          class="template-card"
          v-for="(item, index) in list"
          :key="index"
          @click="handleTargetDetail(item)"
        >
          <view class="card-content">
            <view class="info-section">
              <view class="template-name">{{ item.planName || '训练计划模板' }}</view>
              <image 
                :src="isSelected(index) ? '../../static/xz.png' : '../../static/mx.png'" 
                class="selection-icon"
                @click="toggleSelection(index)"
              ></image>
            </view>
          </view>
        </view>
      </view>

      <template #bottom>
        <view class="action-bar">
          <view class="add-button" @click="addData">
            <text class="button-text">新建模板</text>
          </view>
          <view class="share-button" @click="shareAll">
            <text class="button-text">一键分享</text>
          </view>
        </view>
      </template>
    </z-paging>
  </view>
</template>
<script>

import {plan} from '../../api/fit'
import ZPaging from "../../uni_modules/z-paging/components/z-paging/z-paging.vue";

// 每页记录数量

// tab栏数据

export default {
  components: {ZPaging},
  data() {
    return {
      keyword:'',
      // 订单列表数据
      // list: getEmptyPaginateObj(),
      list: [],
      selectedIndexes: []
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 初始化当前选中的标签
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.$refs.paging.reload();
  },
  /**
   * 生命周期函数--监听页面的卸载
   */
  onUnload() {
    // 卸载全局事件订阅
    uni.$off("syncRefresh");
  },

  methods: {
    addData() {
      uni.navigateTo({
        url: '/pages/muban/index',
      })
    },
    handleTargetDetail(item){
      uni.navigateTo({
        url: '/pages/muban/muban?id='+item.id,
      })
    },
    async getlist(pageNo, pageNum = 10, key) {
      let data = {
        planName: this.keyword,
        page: pageNo,
        size: pageNum,
      };
      const res = await plan(data);
      this.$refs.paging.complete(res.data.list);
    },
    toggleSelection(index) {
      const selectedIndex = this.selectedIndexes.indexOf(index);
      if (selectedIndex === -1) {
        this.selectedIndexes.push(index);
      } else {
        this.selectedIndexes.splice(selectedIndex, 1);
      }
    },
    isSelected(index) {
      return this.selectedIndexes.includes(index);
    },
    shareAll() {
      const selectedIds = this.selectedIndexes.map(index => this.list[index].id);
      // 一键分享逻辑，使用 selectedIds
      console.log('Selected IDs:', selectedIds);
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #EFEFEF;
  padding: 20rpx;
}

.template-list {
  padding: 10rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20rpx;
}

.template-card {
  background: #fff;
  border-radius: 20rpx;
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  }

  .card-content {
    padding: 24rpx;
  }

  .info-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 160rpx;
    position: relative;

    .template-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #000;
      text-align: center;
    }

    .selection-icon {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  }
}
.search-wrapper {
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.action-bar {
  padding: 20rpx 30rpx 50rpx;

  .add-button {
    background: #fff;
    padding: 28rpx;
    border-radius: 16rpx;
    text-align: center;
    transform: translateY(0);
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
    margin-bottom: 20rpx;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
    }

    .button-text {
      color: #000;
      font-size: 28rpx;
      font-weight: 500;
      letter-spacing: 2rpx;
    }
  }

  .share-button {
    background: #000;
    padding: 28rpx;
    border-radius: 16rpx;
    text-align: center;
    transform: translateY(0);
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
    }

    .button-text {
      color: #fff;
      font-size: 28rpx;
      font-weight: 500;
      letter-spacing: 2rpx;
    }
  }
}
</style>